<template>
    <div>
        <div class="take-meals">
            <div class="cashier-border" style="width: 79rem; margin:10px 0 0 10px;">
                <el-row :gutter="8" id="navigation" style="margin-bottom: 1rem">
                    <el-col :span="7">
                        <div class="grid-content bg-purple">
                            <a class="table-state" id="table-one" @click="opentable()">
                                <label>已开台</label>
                                <div class="table-state-num">{{start}}</div>
                            </a>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="grid-content bg-purple">
                            <a class="table-state" id="table-two" @click="appointment()">
                                <label>预订接客</label>
                                <div class="table-state-num">{{booking}}</div>
                            </a>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="grid-content bg-purple">
                            <a class="table-state" id="table-three" @click="free()">
                                <label>空桌</label>
                                <div class="table-state-num">{{empty}}</div>
                            </a>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <el-main class="order-content cashier-border" style="height: 28rem; width: 79rem;
    margin-left: 10px; margin-bottom: 10px;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first" class="tableInfo">
                    <div class="table-num">
                        <div class="col" v-if="datas.length != 0" v-for="item in datas">
                            <div class="table-item table-item-state1" v-if="item.state == online">
                                <div class="table-item-hd">{{item.name}}</div>
                                <div class="table-item-bd">
                                    <div class="table-operations">
                                        <a class="opr opr-add" @click="addOperation(item.tableNum)">加菜</a>
                                        <a class="opr opr-refund" @click="detailedOperation(item.tableNum)">退菜</a>
                                        <a class="opr opr-pay" @click="addOperation(item.tableNum)">结账</a>
                                        <a class="opr opr-queue" @click="detailedOperation(item.tableNum)">清桌</a>
                                        <a class="opr opr-table" @click="oprtableopent(item.tableNum)">换桌</a>
                                        <a class="opr opr-date" @click="reserv(item.tableNum)">预订</a>
                                    </div>
                                </div>
                                <div class="table-item-ft">
                                    <div class="table-item-people hover">
                                        <b>1</b>
                                        <small>人</small>
                                    </div>
                                    <span>建议：1-{{item.tableType.diners}}人</span>
                                </div>
                            </div>
                            <div class="table-item table-item-state3" v-if="item.state == leisure">
                                <div class="table-item-hd">{{item.name}}</div>
                                <div class="table-item-bd">
                                    <form class="table-form">
                                        <div>
                                            <label style="margin-right: 15px">人数</label>
                                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" size="mini" style="margin-right: 5px"></el-input-number>
                                            <el-button type="primary" plain size="mini">下单</el-button>
                                        </div>
                                    </form>
                                    <div class="table-operations">
                                        <a class="opr opr-date" @click="reserv(item.tableNum)">预订</a>
                                    </div>
                                </div>
                                <div class="table-item-ft">
                                    <span>建议：1-{{item.tableType.diners}}人</span>
                                </div>
                            </div>
                            <div class="table-item table-item-state2" v-if="item.state == booksta">
                                <div class="table-item-hd">{{item.name}}</div>
                                <div class="table-item-bd">
                                    <form class="table-form">
                                        <div>
                                            <label>人数</label>
                                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" size="mini" style="margin-right: 5px"></el-input-number>
                                            <el-button type="primary" plain size="mini">下单</el-button>
                                        </div>
                                    </form>
                                    <div class="table-operations">
                                        <a class="opr opr-date" @click="reserv(item.tableNum)">预订</a>
                                    </div>
                                </div>
                                <div class="table-item-ft">
                                    <span>建议：1-{{item.tableType.diners}}人</span>
                                </div>
                            </div>
                        </div>
                        <div class="cart-empty" v-if="datas.length == 0">
                            <img src="../../assets/imgs/ia_100001880.png"/>
                            <div class="cart-empty">暂无菜品</div>
                        </div>
                    </div>

                </el-tab-pane>
                <el-tab-pane class="tableInfo" v-for="item in tableTypesAll" :label="item.name" :name="item.id+''">
                    <div class="col" v-for="item in datas">
                        <div class="table-item table-item-state1" v-if="item.state == online">
                            <div class="table-item-hd">{{item.name}}</div>
                            <div class="table-item-bd">
                                <div class="table-operations">
                                    <a class="opr opr-add" @click="addOperation(item.tableNum)">加菜</a>
                                    <a class="opr opr-refund" @click="detailedOperation(item.tableNum)">退菜</a>
                                    <a class="opr opr-pay" @click="addOperation(item.tableNum)">结账</a>
                                    <a class="opr opr-queue" @click="detailedOperation(item.tableNum)">清桌</a>
                                    <a class="opr opr-table" @click="oprtableopent(item.tableNum)">换桌</a>
                                    <a class="opr opr-date" @click="reserv(item.tableNum)">预订</a>
                                </div>
                            </div>
                            <div class="table-item-ft">
                                <div class="table-item-people hover">
                                    <b>1</b>
                                    <small>人</small>
                                </div>
                                <span>建议：1-{{item.tableType.diners}}人</span>
                            </div>
                        </div>
                        <div class="table-item table-item-state3" v-if="item.state == leisure">
                            <div class="table-item-hd">{{item.name}}</div>
                            <div class="table-item-bd">
                                <form class="table-form">
                                    <div>
                                        <label>人数</label>
                                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" size="mini" style="margin-right: 10px"></el-input-number>
                                        <el-button type="primary" plain size="mini">下单</el-button>
                                    </div>
                                </form>
                                <div class="table-operations">
                                    <a class="opr opr-date" @click="reserv(item.tableNum)">预订</a>
                                </div>
                            </div>
                            <div class="table-item-ft">
                                <span>建议：1-{{item.tableType.diners}}人</span>
                            </div>
                        </div>
                        <div class="table-item table-item-state2" v-if="item.state == booksta">
                            <div class="table-item-hd">{{item.name}}</div>
                            <div class="table-item-bd">
                                <form class="table-form">
                                    <div>
                                        <label>人数</label>
                                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" size="mini" style="margin-right: 10px"></el-input-number>
                                        <el-button type="primary" plain size="mini">下单</el-button>
                                    </div>
                                </form>
                                <div class="table-operations">
                                    <a class="opr opr-date" @click="reserv(item.tableNum)">预订</a>
                                </div>
                            </div>
                            <div class="table-item-ft">
                                <span>建议：1-{{item.tableType.diners}}人</span>
                            </div>
                        </div>
                    </div>
                    <div class="cart-empty" v-if="datas.length == 0">
                        <img src="../../assets/imgs/ia_100001880.png"/>
                        <div class="cart-empty">暂无餐桌</div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-main>


        <!--退菜，清桌，结账-->
        <el-dialog title="A1" :visible.sync="refund" id="out">
                <div class="table-info">
                    <div class="form-header clearfix">
                        <div class="table-order">
                            <div class="table-meta">
                                <b class="text-big text-info">￥{{price}}</b>未付款
                            </div>
                            <div class="table-meta">
                                <b class="text-big text-danger">￥{{actualPrice}}</b>已付款
                            </div>
                        </div>
                        <div class="table-actions">
                            <a class="opr opr-pay">结账</a>
                            <a class="opr opr-add">加菜</a>
                            <a class="opr opr-refund" :class="isCleanTable?'':'opr-disabled'" @click="cleanTable()">清桌</a>
                        </div>
                    </div>
                    <table class="cells">
                        <tr class="cell-title">
                            <th colspan="2">下单菜品</th>
                            <th width="60">单价</th>
                            <th width="60">数量</th>
                            <th width="60">退菜数量</th>
                            <td>
                                <el-button type="danger" size="mini" disabled>批量退菜</el-button>
                            </td>
                        </tr>
                        <tr v-if="details.datas.length == 0">
                            <td colspan="7" class="cart-empty">没有已下单的菜</td>
                        </tr>
                        <tr v-for="item in details.datas">
                            <td colspan="2"><img :src="item.foods.picPath"/></td>
                            <td>{{item.foods.price}}</td>
                            <td>{{item.count}}</td>
                            <td> <el-input-number v-model="item.num" :min="1" :max="item.count" label="描述文字" size="mini"></el-input-number></td>
                            <td><el-button type="danger" plain size="mini" @click="outTwo(item)">退菜</el-button></td>
                        </tr>
                    </table>
                </div>
        </el-dialog>

        <!--餐桌选择-->
        <el-dialog title="选择桌台" :visible.sync="oprtable">
            <div>
                <div>
                    <el-select v-model="value" placeholder="请选择" @change="select">
                        <el-option
                                v-for="item in tableTypesAll"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <div class="cart-alter" v-if="selectTable.length != 0">
                        <div class="col" v-for="item in selectTable">
                            <el-button @click="changeTable(item.tableNum)" :disabled="item.state != '空桌'">{{item.name}}</el-button>
                        </div>
                    </div>
                    <div class="cart-alter" v-if="selectTable.length == 0">
                        <img src="../../assets/imgs/ia_100001880.png"/>
                        <div class="cart-empty">暂无餐桌</div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!--预订-->
        <el-dialog title="预订" :visible.sync="reservation">
            <div class="form-header">
                <el-row type="flex" class="row-bg" justify="space-between">
                    <el-col :span="4"><div class="grid-content bg-purple">
                        <span>门店：</span>
                    </div></el-col>
                    <el-col :span="9"><div class="grid-content bg-purple-light">
                        <span>日期：{{time}}</span>
                    </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <span>已预订：</span>
                    </div></el-col>
                </el-row>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="用餐人数" prop="bookHuman">
                            <el-input-number v-model="ruleForm.bookHuman" :min="1" :max="10" label="描述文字"></el-input-number>
                        </el-form-item>
                    </div></el-col>
                </el-row>

                <el-row :gutter="15">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="到店时间" prop="bookDate">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.bookDate" style="width: 100%;"></el-date-picker>
                            <el-time-picker
                                    arrow-control
                                    v-model="ruleForm.bookTime"
                                    :picker-options="{
                                      selectableRange: '18:30:00 - 20:30:00'
                                    }"
                                    placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <el-form-item label="餐桌">
                            <el-tag>{{choicetable}}</el-tag>
                            <button type="button" class="el-button el-button--text el-button--medium" @click="oprtableopent()">
                                <i class="el-icon-view"></i>
                                <span>选择</span>
                            </button>
                        </el-form-item>
                    </div></el-col>
                </el-row>
                <el-form-item>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')">确定预订</el-button>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    Date.prototype.format=function(fmt){
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "H+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
    export default {
        name: "table",
        data() {
            return{
                details:{
                    datas:[],
                },
                start:0,
                booking:0,
                empty:0,
                activeName: 'first',
                num: 1,
                datas:[],
                online:'就餐中',
                leisure: '空桌',
                booksta: '已预约',
                refund :false,
                oprtable:false,
                reservation:false,
                value: 2,
                selectTable:[],
                tableTypesAll:[],
                changeTableSource:-1,
                tableNum:'',
                time:'',

                /*已选餐桌*/
                choicetable:'',

                /*判断是否是预订(false)和换桌(true)*/
                isReseAndOut: true,

                /*已支付*/
                price:'',
                /*应支付*/
                actualPrice:'',

                isIndeterminate: true,
                checkedCities: [],
                cityOptions:[],
                cities: this.cityOptions,
                checkAll: false,

                tableCurrNum:'',

                ruleForm: {
                    bookHuman:'',
                    bookDate:'',
                    bookTime:'',
                    retainTime:30,
                    name: '',
                    tableNum:'0000',
                    phone:'',
                    customerId:'00000000',
                    deposit:'10',
                    state:'待消费'
                },
                rules: {
                    name: [
                        { required: true, message: '请输入预订人姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入预订人联系方式', trigger: 'blur' },
                        { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                    ],
                    bookHuman: [
                        { required: true, message: '请选择用餐人数', trigger: 'change' }
                    ],
                    bookDate: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    bookTime: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                },
                /*是否可以清桌*/
                isCleanTable:true,
            }
        },
        methods: {
            addOperation(item){
                let _this = this;
                this.$axios.post("/ec/quetable/"+item).then(function (response) {
                    _this.$store.state.selectTableId = response.data[200];
                    _this.$router.push('/cashier')
                    console.log(_this.$store.state.selectTableId);
                    });
            },
            handleCheckAllChange(val) {
                this.checkedCities = val ? this.cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            /*退菜操作*/
            outTwo(item){
                let _this = this;
                console.log(item)
                this.$axios.post('orderfood/update/'+this.tableCurrNum,{
                    id:item.id,
                    foodId:item.foods.id,
                    count:item.count-item.num
                })
                    .then(function (response) {
                        _this.actualPrice = response.data.actualPrice;
                        _this.price = response.data.actualPrice == 0?response.data.price:0;
                        _this.details.datas = [];
                        response.data.orderFoods.forEach(order=>{
                            order.num = order.count;
                            _this.details.datas.push(order)
                            _this.cityOptions.push(order.id);
                        })
                    })
            },
            /*清桌操作*/
            cleanTable(){
                /*判断是否可以清桌*/
                if (!this.isCleanTable){
                    return false;
                }
                this.$axios.post('/diningTable/cleantable/'+this.tableCurrNum)
                    .then(function (response) {
                        window.location.reload();
                    })
            },


            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.ruleForm.tableNum=_this.choicetable;
                        console.log(_this.ruleForm)
                        this.$axios.post('bookOrder/save/',_this.ruleForm)
                            .then(function (response) {
                               window.location.reload();
                            })
                            .catch(function (error) {
                                _this.$message.error('预订失败');
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.reservation = false;
                this.$refs[formName].resetFields();
            },
            oprtableopent(num){
                this.changeTableSource = num;
                this.oprtable = true;
                let _this = this;
                this.$axios.post('diningTable/table/'+this.value)
                    .then(function (response) {
                        _this.selectTable = response.data;
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            handleClick(tab, event) {
                let _this = this;
                let url;
                this.datas = [];
                if(tab.name == 'first'){
                    url = '/diningTable/show';
                }else{
                    url = '/diningTable/table/'+tab.name;
                }
                this.$axios.post(url)
                    .then(function (response) {
                        _this.datas = response.data;
                        console.log(response.data)
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            detailedOperation(num){
                this.tableCurrNum = num;
                this.refund = true;
                let _this = this;
                this.$axios.post("/ec/quetable/"+num).then(function (response) {
                    _this.details.datas = [];
                        console.log(response);
                        _this.actualPrice = response.data[200].actualPrice;
                        _this.price = response.data[200].actualPrice == 0?response.data[200].price:0;
                        /*_this.details.datas = response.data.orderFoods;*/
                        _this.isCleanTable = response.data.state == '待付款' || response.data.state == '待结账'?false:true;
                        response.data[200].orderFoods.forEach(order=>{
                            order.num = order.count;
                            _this.details.datas.push(order);
                            _this.cityOptions.push(order.id);
                        })
                        console.log(_this.details.datas)
                    })
            },

            handleChange(){

            },
            selectTableType(){
                console.log()
            },
            /*换桌与选择操作*/
            changeTable(num){
                if(!this.isReseAndOut) {
                    this.choicetable = num;
                    this.oprtable = false;
                    return;
                }
                let url = "/diningTable/change/"+this.changeTableSource+"/"+num;
                this.$axios.post(url)
                    .then(function (response) {
                        window.location.reload();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            select(){
                let _this = this;
                this.$axios.post('diningTable/table/'+this.value)
                    .then(function (response) {
                        _this.selectTable = response.data;
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            /*预订*/
            reserv(num){
                this.reservation = true;
                this.isReseAndOut = false;
                this.choicetable = num;

            },
            opentable(){
                this.emptyData();
                let _this = this;
                this.$axios.post('/diningTable/show')
                    .then(function (response) {
                        response.data.forEach(re=>{
                            if(re.state == '就餐中'){
                                _this.datas.push(re);
                                _this.start++;
                            }
                            if(re.state == '空桌'){
                                _this.empty++;
                            }
                            if(re.state == '已预约'){
                                _this.booking++;
                            }
                        })
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            appointment(){
                this.emptyData();
                let _this = this;
                this.$axios.post('/diningTable/show')
                    .then(function (response) {
                        response.data.forEach(re=>{
                            if(re.state == '就餐中'){
                                _this.start++;
                            }
                            if(re.state == '空桌'){
                                _this.empty++;
                            }
                            if(re.state == '已预约'){
                                _this.datas.push(re);
                                _this.booking++;
                            }
                        })
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            free(){
                this.emptyData();
                let _this = this;
                this.$axios.post('/diningTable/show')
                    .then(function (response) {
                        response.data.forEach(re=>{
                            if(re.state == '就餐中'){
                                _this.start++;
                            }
                            if(re.state == '空桌'){
                                _this.datas.push(re);
                                _this.empty++;
                            }
                            if(re.state == '已预约'){
                                _this.booking++;
                            }
                        })
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            emptyData(){
                this.empty = 0;
                this.start=0;
                this.booking=0;
                this.datas=[];
            },
            resaxios(){
                let _this = this;
                this.$axios.post('/diningTable/show')
                    .then(function (response) {
                        console.log(response);
                        _this.datas = response.data;
                        response.data.forEach(re=>{
                            if(re.state == '就餐中'){
                                _this.start++;
                            }
                            if(re.state == '空桌'){
                                _this.empty++;
                            }
                            if(re.state == '已预约'){
                                _this.booking++;
                            }
                        })
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        created() {
            let _this = this;
            this.resaxios();
            this.$axios.post('/diningTable/zwlx')
                .then(function (response) {
                    _this.tableTypesAll = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        mounted(){
            let _this = this;
            setInterval(function(){
                let tmeptime = new Date().format("yyyy/MM/dd HH:mm:ss");
                _this.time = tmeptime;
            }, 1000);
        },

    }
</script>

<style scoped>
    @import "../../css/PublicCashier.css";
    @import "../../css/Order.css";
    @import "../../css/TakeMeals.css";
    @import "../../css/table.css";
    #navigation{
        padding: 16px;
    }
</style>
